<template>
  <div>
    <div class="head-container">
      <el-input v-model="filterText" placeholder="请输入公司/部门名称" clearable size="small" prefix-icon="el-icon-search"
        filterable style="margin-bottom: 20px" />
    </div>
    <div class="head-container">
      <el-tree :props="defaultProps" ref="tree" :load="loadNode" :filter-node-method="filterNode" lazy
        @node-click="treeNodeClick">
      </el-tree>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import { findMarkerById, moveMapToMarker } from '../../utils/map/index'
import { listUser, } from "../../api/system/user";
import { NewdeptTreeSelect, listDevice } from '../../api/system/device'
export default {
  name: 'LazyTree',
  data() {
    return {
      // 输入的查找数据
      filterText: "",
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "isLeaf"
      },
    };
  },
  components: {

  },
  props: {
    name: String,
    statusList: null,
    ColorList: []
  },

  mounted() {
    this.GetList()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    // 懒加载树加载数据
    loadNode(node, resolve) {
      if (node.level > 0) {
        if (!node.data.children) {
          this.$set(node.data, 'children', [])
          listDevice({ status: 3, deptId: node.data.id }).then(res => {
            const newNode = res.rows.map(item => ({
              id: item.deviceId,
              label: item.deviceName
            }))
            node.data.children.push(...newNode)
          })
        }
        return resolve(node.data.children);
      }
      setTimeout(() => {
        const data = this.deptOptions
        resolve(data);
      }, 500);
    },
    // tree筛选事件
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    treeNodeClick(data, node) {
      this.queryParams.deptId = ''
      this.queryParams.deviceId = ''
      // 根据当前节点层级判断
      if (node.level < 3 && node.level > 1) {
        this.queryParams.deptId = node.data.id
        this.queryParams.deviceId = ''
      }
      if (node.level > 2) {
        this.queryParams.deptId = ''
        this.queryParams.deviceId = node.data.id
      }
      this.handleQuery();
    },
    handleQuery() {
      this.getList()
    },
    /** 查询device列表 */
    async getList() {
      this.loading = true;
      await listDevice(this.queryParams).then(response => {
        this.deviceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>
<style>
.el-tree-node__label
{
  font-size: 16px;
}
</style>
